
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="email=no" />
    <meta name="wap-font-scale"  content="no" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AXUI斧子前端框架，面向设计的自主国产前端框架</title>
    <meta name="description" content="AXUI，面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API。能用css写的不用js；能用js写的不用插件；能用插件的不重复使用插件。通过观察本框架的核心文件会发现核心文件只有ax.css和ax.js，加载速度飞快。">
    <meta name="keywords" content="前端框架,UI,CSS3,HTML5,jQuery,面向设计,前端工程师">
    <link href="https://at.alicdn.com/t/font_1551254_sk7y2quxfyq.css" rel="stylesheet" type="text/css" />
    <link href="../src/css/ax.css?v=1.1" rel="stylesheet" type="text/css" >
    <link href="../src/css/ax-response.css?v=1.1" rel="stylesheet" type="text/css" >
    <link href="css/ax-admin02.css?v=1.1" rel="stylesheet" type="text/css" >
</head>
<body class="ax-admin">
<!--nav-->
<nav class="ax-flex-col">
    <div class="ax-nav-header">
        <a href="##" class="ax-logo"><img src="images/ax-logo.png" /></a>
        <a href="##" class="ax-close-nav ax-iconfont ax-icon-menu-fold"></a>
    </div>
    <div class="ax-flex-block ax-nav-main">
        <ul class="ax-menu ax-style-dot" id="menu-basic">
            <li>
                <a href="##"><span class="ax-legend ax-iconfont ax-icon-settings-alt"></span><span class="ax-name">系统配置</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                <ul>
                    <li><a href="##"><span class="ax-name">组织架构管理</span></a></li>
                    <li><a href="##"><span class="ax-name">人员管理</span></a></li>
                    <li><a href="##"><span class="ax-name">功能权限管理</span></a></li>
                    <li><a href="##"><span class="ax-name">数据权限管理</span></a></li>
                </ul>
            </li>
            <li>
                <a href="#"><span class="ax-legend ax-iconfont ax-icon-message-o"></span><span class="ax-name">团队协作</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                <ul>
                    <li><a href="##"><span class="ax-name">日历</span></a></li>
                    <li><a href="##"><span class="ax-name">笔记</span></a></li>
                    <li><a href="##"><span class="ax-name">任务看板</span></a></li>
                    <li><a href="##"><span class="ax-name">知识库</span></a></li>
                </ul>
            </li>
            <li>
                <a href="#"><span class="ax-legend ax-iconfont ax-icon-global"></span><span class="ax-name">监控管理</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                <ul>
                    <li><a href="##"><span class="ax-name">注册中心监控</span></a></li>
                    <li><a href="##"><span class="ax-name">服务治理</span></a></li>
                    <li><a href="##"><span class="ax-name">服务监控</span></a></li>
                    <li><a href="##"><span class="ax-name">服务链路跟踪</span></a></li>
                </ul>
            </li>
            <li>
                <a href="#" ><span class="ax-legend ax-iconfont ax-icon-me"></span><span class="ax-name">个人中心</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                <ul>
                    <li><a href="#"><span class="ax-name">日志管理</span></a></li>
                    <li><a href="#"><span class="ax-name">好友管理</span></a></li>
                    <li><a href="#"><span class="ax-name">个人资料</span></a></li>
                    <li><a href="#"><span class="ax-name">修改密码</span></a></li>
                </ul>
            </li>
            <li>
                <a href="#"><span class="ax-legend ax-iconfont ax-icon-power"></span><span class="ax-name">退出系统</span></a>
            </li>
        </ul>
        <div class="ax-mask"></div><!--收缩后的遮罩层，点击可重新展开菜单-->
    </div>
</nav><!--end-->
<!--header-->
<header class="ax-flex-row">
    <div class="ax-flex-block">
        <div class="ax-breadcrumb"><a href="##">说明文档</a><i class="ax-gutter ax-iconfont ax-icon-right"></i><span>系统API</span></div>
    </div>
    <div class="ax-header-search"><input type="text" name="" placeholder="关键字..."/> <a href="##" class="ax-iconfont ax-icon-search"></a></div>
</header>
<div class="ax-space-header"></div><!--头部占位-->
<!--main-->
<main id="article01">

    <div class="ax-padding">

        <h2>框架简介</h2>
        使用AX框架自身的组件可以自由创建多种风格的管理系统框架，理论上来说可以创建任意的带菜单的页面，包含不限于：API接口文档，产品手册，管理系统，网站地图等。
        <div class="ax-break"></div><div class="ax-break"></div>

        <h2>下载DEMO</h2>
        为了方便用户学习和使用，本页面已经打包。
        <div class="ax-break"></div><div class="ax-break"></div>

        <h2>使用方法</h2>
        在引入ax.css和ax.js之后，接着引入ax-admin02.css和ax-admin02.js即可。
        <div class="ax-break"></div><div class="ax-break"></div>

        <h2>框架布局</h2>
        <ul>
            <li>
                不同于ax-admin01.php使用了弹性布局，该框架布局上使用常规的布局方式，左侧菜单和头部使用fixed定位，main主体部分是常规的流体布局。
            </li>
            <li>
                风格上使用的样式类主要包括：ax-admin，ax-body，ax-header-search，ax-nav-main，ax-aside-header，ax-footer等。
            </li>
        </ul>


        <div class="ax-break"></div><div class="ax-break"></div>

        <h2>框架特点</h2>
        <ul>
            <li>支持对左侧菜单使用cookie，包括缩小到图标和全部隐藏。如取消请删除ax-admin02.js中相应代码。</li>
            <li>适配了移动端，包括手机和平板。</li>
            <li>集成了AX框架的menu菜单(<a href="http://www.axui.cn/ax-menu.php" target="_blank" class="ax-color-primary">使用详细</a>)，面包屑路径(<a href="http://www.axui.cn/ax-breadcrumb.php" target="_blank" class="ax-color-primary">使用详细</a>)，scrollnav菜单(<a href="http://www.axui.cn/ax-scrollnav.php" target="_blank" class="ax-color-primary">使用详细</a>)。</li>
        </ul>


        <div class="ax-break"></div><div class="ax-break"></div>

        <h2>标准结构</h2>
        <pre>
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
    ...
&lt;/head>
&lt;body class="ax-admin">
&lt;nav class="ax-flex-col">
    ...
&lt;/nav>
&lt;header class="ax-flex-row">
    ...
&lt;/header>
&lt;div class="ax-space-header">&lt;/div>
&lt;!--main-->
&lt;main id="article01">
    ...
    &lt;footer>
        ...
    &lt;/footer>
&lt;/main>
&lt;div class="ax-scrollnav-v" id="article-nav01">
    &lt;a href="##" class="ax-close ax-iconfont ax-icon-arrow-right">&lt;/a>
&lt;/div>
&lt;/body>
&lt;/html>
</pre>

    </div>

    <footer>
        © 2020 <a href="http://www.axui.cn" target="_self">Axui.cn</a> MIT license      
    </footer>

</main>

<div class="ax-scrollnav-v" id="article-nav01"><a href="##" class="ax-close ax-iconfont ax-icon-arrow-right"></a></div>

<script src="../src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../src/js/ax.min.js?v=1.1" type="text/javascript"></script>
<script src="../src/js/svgSprites.js?v=1.1" type="text/javascript"></script>
<script type="text/javascript" src="../src/plugins/scrollnav/scrollnav.min.js"></script>

<script type='text/javascript'>
    $(document).ready(function() {
        $('#menu-basic').axMenu({cookie: true});
        $(".ax-nav-main,body").axScroll({horizrailenabled:false});
        var articlenav01 = document.querySelector('#article-nav01');
        scrollnav.init(article01, {
            insertTarget:articlenav01,
        });

    });
</script>
<script src="js/ax-admin02.js?v=1.1" type="text/javascript"></script>
</body>
</html>